<template>
  <div>
    <v-album v-if="isShowPic" :id="data.list[data.index].id"></v-album>
    <v-touch v-else @panstart.prevent="data.panStart"
             @panmove.prevent="data.panMove"
             @panend.prevent="data.panEnd" v-vuet-scroll="{ path: 'collectsalefullscreenlist', name: 'content' }">
      <div v-for="(item,index) in data.list" class="container"
           :key="index"
           style="width:3.75rem;font-size:60px;"
           :style="{transition:`all ${data.transition(index)}s`,transform:`translateY(${data.top(index)})`,height:data.windowHeight+'px'}"
           :ref="`touch${index}`">
        <v-salefullscreenitem @receiveClickCollect="data.collect" @receiveClickBuy="data.skip" :arrayindex="index" :currentindex = "data.index" :item="item" :windowHeight="data.windowHeight"></v-salefullscreenitem>
      </div>
    </v-touch>
  </div>

</template>

<script>

  import utils from '../../utils'
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [
      mapModules({ data: 'collectsalefullscreenlist'}),
      mapRules({store: [{ path: 'collectsalefullscreenlist' }],need: [{ path: 'collectsalefullscreenlist' }]}),

    ],

    data() {
      return {
        isShowPic:false
      }
    },


    beforeCreate(){

    },
    created() {

    },
    mounted() {
      var that = this
      this.data.needFetch = true
      window.addEventListener('hashchange', function() {
        if (window.location.href.indexOf("#viewpictures") != -1) {
          that.isShowPic = true
        } else {
          that.isShowPic = false
        }
      });
    },
    methods: {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
